<template>
  <div style="position: relative">
    <Head/>
    <left/>
    <div style="position: absolute;top: 60px;left: 200px">
      <getson :data="data"/>
    </div>
    <div style="position: absolute;top: 60px;left: 350px">
      <p>账号：<input type="text">姓名：<input type="text">手机号：<input type="text">
        <van-button>查询</van-button>
        <van-button>重置</van-button>
      </p>
      <p>
        <van-button @click="changeshow">新增</van-button>
        <van-button>删除</van-button>
        <van-button>导入</van-button>
        <van-button>导出</van-button>
        <van-button>冻结</van-button>
        <van-button>解冻</van-button>
        <van-button>回收站</van-button>
      </p>
      <table border="3" cellspacing="0" style="width:800px;text-align: center">
        <tr>
          <td>头像</td>
          <td>账号</td>
          <td>名称</td>
          <td>工号</td>
          <td>性别</td>
          <td>手机号</td>
          <td>操作</td>
        </tr>
        <tr v-for="i in user" :key="i.id">
          <td><img :src="'http://127.0.0.1:5000/static/upload/'+i.pic" alt=""></td>
          <td>{{ i.username }}</td>
          <td>{{ i.name }}</td>
          <td>{{ i.gonghao }}</td>
          <td v-if="i.sex==1">男</td>
          <td v-else>女</td>
          <td>{{ i.mobile }}</td>
          <td></td>
        </tr>
      </table>
      <van-form v-show="show">
        <van-uploader :after-read="addpic"></van-uploader>
        <van-field label="用户名" v-model="form.username"></van-field>
        <van-field label="密码" v-model="form.password"></van-field>
        <van-field label="姓名" v-model="form.name"></van-field>
        <van-field label="手机号" v-model="form.mobile"></van-field>
        <van-field label="员工编码" v-model="form.ygcode"></van-field>
        <van-field label="工号" v-model="form.gonghao"></van-field>
        <van-radio-group direction="horizontal" v-model="form.sex">
          <van-radio name="1">男</van-radio>
          <van-radio name="2">女</van-radio>
        </van-radio-group>
        <van-radio-group direction="horizontal" v-model="form.shiti">
          <van-radio name="1">实体用户</van-radio>
          <van-radio name="2">非实体用户</van-radio>
        </van-radio-group>
        <getson :data="data" @pid="getid"/>
        <select name="" id="" v-model="form.gangweiid">
          <option v-for="i in gangwei" :key="i.id" :value="i.id">{{ i.name }}</option>

        </select>
        <van-button round style="color: cornflowerblue" @click="add">添加</van-button>
        <van-button round style="color: cornflowerblue" @click="colseshow">关闭</van-button>
      </van-form>


    </div>

  </div>
</template>

<script>
import head from "@/components/head";
import left from "@/components/left";
import getson from "@/components/getson";
import maxios from "@/http/axios";
import axios from 'axios'

export default {
  components: {
    'Head': head,
    'left': left,
    'getson': getson
  },
  name: "users",
  data() {
    return {
      data: [],
      show: false,
      form: {'gongsiid': 0, 'pic': ''},
      gangwei: [],
      user: []
    }
  },
  methods: {
    addpic(file) {
      console.log(file)
      let formdata = new FormData()
      formdata.append('file', file.file)
      axios({url: 'http://127.0.0.1:5000/compan/addpic1', method: 'post', data: formdata}).then(res => {
        if (res.data.code == 200) {
          alert('ok')
          this.form.pic = res.data.pic
        }
      })
    },
    add() {
      maxios('/users/user', 'post', this.form).then(res => {
        if (res.code == 200) {
          alert('添加成功')
          this.form = {}
        }
      })
    },
    getdata() {
      maxios('/compan/add', 'get')
          .then(res => {
            this.data = res.list
            this.getgangwei()


          })
    },
    getgangwei() {
      maxios('/compan/gangwei', 'get')
          .then(res => {
            this.gangwei = res.list
            this.getuser()

          })
    },
    getuser() {
      maxios('/users/user', 'get').then(res => {
        if (res.code == 200) {
          this.user = res.list

        }
      })
    },
    changeshow() {
      this.show = true
    },
    getid(pid) {
      this.form.gongsiid = pid
      console.log(this.form.gongsiid)
    },
    colseshow() {
      this.show = false
    }

  },
  mounted() {
    this.getdata()


  }
}
</script>

<style scoped>

</style>